<template>
	<uni-popup ref="popup" type="center" @mask-click="close">
		<view style="width: 480rpx">
			<view class="bgc-white round-md py-50 px-30">
				<view class="flex items-center justify-center">
					<M-RoundProgress2
						:width="100" 
						:border-w="20" 
						class="progress"
						bgcolor="#00c386" 
						:percent="list?.filter?.(item => item.answer?.length)?.length / list?.length * 100" 
					>
						<template #content>
							<view class="flex flex-column items-center h-full justify-center">
								<view class="text-24 mb-10">当前进度</view>
								<view>
									<text class="text-green text-32">{{ list?.filter?.(item => item.answer?.length)?.length }}</text>
									<text class="mx-10 text-24">/</text>
									<text class="text-24">{{ list?.length }}</text>
								</view>
							</view>
						</template>
					</M-RoundProgress2>
				</view>
				
				<view class="text-22 text-gray-80 mt-15 text-center mt-50">你有未完成的题目，请注意检查试卷</view>
				<view class="flex justify-center items-center mt-40">
					<view class="text-26 text-gray mr-40" @click="close">继续答题</view>
					<view class="bgc-primary2 round-30 py-15 text-26 text-white text-center" style="width: 200rpx" @click="onSubmit">确认交卷</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	
	import { ref, watch } from 'vue';
	
	
	/** props */
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => ([])
		}
	});
	
	/** 弹窗实例 */
	const popup = ref({});
	
	/** emits */
	const emits = defineEmits(['update:modelValue', 'submit']);
	

	/** 监听 modelValue */
	watch(() => props.modelValue, async show => {
		popup.value?.[show ? 'open' : 'close']?.();
		
	}, { immediate: true });
	
	/** 通知外面关闭弹窗 */
	const close = () => {
		emits("update:modelValue");
	};
	
	/** 提交 */
	const onSubmit = () => {
		emits('submit');
	};
	
	
</script>